@font-face {
    font-family: BebasNeue;
    src: url(https://img121.7dun.com/newRecommend2/BebasNeue-1.otf) format('truetype');
}

@font-face {
    font-family: wenziCu;
    src: url(https://img121.7dun.com/20230207NewImg/wuxianshang/wenzi90J.ttf) format('truetype');
}

.version-c {
    font-size: 20rpx;
    font-weight: 400;
    margin-top: 48rpx;
}

.copyright-c,
.version-c {
    color: #3c454e;
    text-align: center;
}

.copyright-c {
    font-size: 22rpx;
    height: 50rpx;
    margin-bottom: 8rpx;
    margin-top: 84rpx;
}

page {
    background-color: #1c1c1e;
}

.center-head {
    background: url('https://img121.7dun.com/20230207NewImg/center/center-head.png') no-repeat;
    background-size: 100% 100%;
    height: 428rpx;
    width: 750rpx;
}

.head-top {
    align-items: center;
    display: flex;
    margin-left: 32rpx;
}

.head-top .head-top-fl {
    border-radius: 50%;
    height: 100rpx;
    margin-right: 28rpx;
    width: 100rpx;
}

.head-top .head-top-fl image {
    border-radius: 50%;
    height: 100%;
    width: 100%;
}

.head-top .head-top-fr {
    color: #fff;
}

.head-top .head-top-fr .head-top-title {
    align-items: center;
    display: flex;
}

.head-top .head-top-fr .head-top-title .head-top-name {
    font-size: 34rpx;
    font-weight: 600;
}

.head-top .head-top-fr .head-top-title .head-top-img {
    margin-left: 18rpx;
}

.small-font {
    font-size: 24rpx;
}

.shuoming {
    align-items: center;
    background-color: #2f09db;
    display: flex;
    justify-content: space-around;
    margin: 0 auto;
    padding: 20rpx 30rpx;
    width: 680rpx;
}

.jindutiao,
.shuoming {
    box-sizing: border-box;
}

.jindutiao {
    background-color: #242428;
    margin: 32rpx auto;
    padding: 28rpx;
    width: 686rpx;
}

.jindutiao .jindutiao-lv {
    color: #9aa1a9;
    font-family: BebasNeue;
    font-size: 28rpx;
    margin-bottom: 18rpx;
}

.jindutiao .jindutiao-num {
    align-items: flex-end;
    display: flex;
    justify-content: space-between;
    margin-bottom: 12rpx;
}

.jindutiao .jindutiao-num .jindutiao-num-fl {
    color: #f6f6f8;
    font-family: BebasNeue;
    font-size: 48rpx;
}

.jindutiao .jindutiao-num .jindutiao-num-fr {
    color: #656b72;
    font-size: 18rpx;
    font-weight: 400;
    margin-bottom: 12rpx;
}

.jindutiao .pro {
    border-radius: 8rpx;
    height: 8rpx;
    overflow: hidden;
    width: 100%;
}

.jindutiao .pro .pro-img {
    transform: skewX(30deg);
}

.jindutiao .pro .pro-img:nth-child(1) {
    height: 8rpx;
    left: -10rpx;
    position: absolute;
    top: 0rpx;
    width: 340rpx;
}

.jindutiao .pro .pro-img:nth-child(2) {
    height: 8rpx;
    left: -50rpx;
    position: absolute;
    top: 0rpx;
    width: 340rpx;
}

.header {
    align-items: center;
    display: flex;
}

.header .headimg {
    border: 10rpx solid #fff;
    border-radius: 50%;
    box-shadow: 0 14px 30px 0 hsla(49, 27%, 84%, 0.4);
    flex: 0 0 160rpx;
    height: 160rpx;
    margin: 0rpx 30rpx;
    width: 160rpx;
}

.header .middle {
    display: flex;
    flex-direction: column;
}

.header .middle .title .title-top {
    align-items: center;
    color: #fff;
    display: flex;
    vertical-align: middle;
}

.header .middle .title .title-top .title-img {
    margin-right: 10rpx;
    width: 50rpx;
}

.header .middle .title .title-top .title-vip {
    color: #fff;
    font-family: Bigjian;
    font-size: 30rpx;
    text-align: center;
}

.header .middle .title .name {
    color: #fff;
    font-size: 30rpx;
    font-weight: 700;
}

.header .middle .title .member {
    background: url('https://img121.7dun.com/member_grade/equity.png') no-repeat;
    background-size: 100%;
    height: 50rpx;
    margin-top: 10rpx;
    text-align: center;
    width: 150rpx;
}

.header .middle .vip-c {
    align-items: center;
    background: #fff8dd;
    border-radius: 50rpx;
    color: #ffcc09;
    display: flex;
    font-size: 24rpx;
    font-weight: 500;
    margin-top: 20rpx;
    padding: 0rpx 20rpx;
}

.header .middle .vip-c .icon-vip {
    font-size: 36rpx;
    line-height: 40rpx;
    margin-right: 10rpx;
}

.header .middle .vip-c.disabled {
    color: #999;
}

.header .right {
    background-color: #fff8dd;
    border-radius: 100rpx !important;
    color: #000;
    font-size: 26rpx;
    height: 50rpx;
    line-height: 50rpx;
    margin-right: 30rpx;
    overflow: hidden;
    padding: 0rpx;
    width: 130rpx;
}

.header .right::after {
    display: none;
}

.status-bar {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    width: 686rpx;
}

.status-bar .item {
    background: url('https://img121.7dun.com/yuanqimali/center/moneyBg.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 32rpx 0 36rpx 28rpx;
    width: 334rpx;
}

.status-bar .item:last-child {
    background: url('https://img121.7dun.com/yuanqimali/center/scoreBg.png') no-repeat;
    background-size: 100% 100%;
}

.status-bar .item .number {
    -webkit-text-fill-color: transparent;
    background: linear-gradient(270deg, #f7ffff, #9df9fc);
    -webkit-background-clip: text;
    color: #fff;
    font-family: BebasNeue;
    font-size: 48rpx;
    margin-bottom: 16rpx;
}

.status-bar .item .number .small-font {
    color: #9aa1a9;
    font-size: 20rpx;
    font-weight: 400;
    margin-left: 8rpx;
}

.status-bar .item .text {
    color: #6c727a;
    font-size: 22rpx;
}

.order-c {
    background: #242428;
    box-sizing: border-box;
    margin: 24rpx auto 0;
    width: 686rpx;
}

.order-c .order-c-top {
    align-items: center;
    border-bottom: 2rpx solid #1c1c1e;
    display: flex;
    padding: 32rpx 0 28rpx 28rpx;
}

.order-c .order-c-top .title {
    color: #ddd;
    font-family: wenziCu;
    font-size: 28rpx;
}

.order-c .order-c-top .all-btn {
    color: #ffcc09;
    font-size: 24rpx;
    font-weight: 500;
}

.order-c .body {
    align-items: flex-end;
    border-radius: 0 0 20rpx 20rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    padding: 20rpx 0rpx;
    width: 100%;
}

.order-c .body .item {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-bottom: 30rpx;
    position: relative;
    width: 25%;
}

.order-c .body .item text {
    color: #9aa1a9;
    font-size: 22rpx;
    margin-top: 8rpx;
}

.order-c .body .item .youyouhui {
    background: #9df9fc;
    border: 2rpx solid #242428;
    border-radius: 18rpx;
    color: #000;
    font-size: 16rpx;
    font-weight: 500;
    height: 28rpx;
    line-height: 28rpx;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 70rpx;
}

.order-c .body .item .dot {
    background: #ed5c42;
    border-radius: 50rpx;
    bottom: 76rpx;
    color: #fff;
    font-family: PingFang SC;
    font-size: 22rpx;
    font-weight: 700;
    height: 30rpx;
    left: 60%;
    line-height: 30rpx;
    padding: 0rpx 10rpx;
    position: absolute;
    text-align: center;
}

.order-c .body .item .right {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    position: relative;
}

.order-c .body .item .right::after {
    border: none;
}

.order-c2 {
    padding: 20rpx 0rpx;
}

.order-c2 .body {
    height: 100%;
}

.center-banner {
    display: block;
    height: 160rpx !important;
    margin: 0rpx auto;
    width: 680rpx !important;
}

.action-list {
    background: #fff;
    border-radius: 20rpx;
    box-shadow: 0 14rpx 30rpx 0 hsla(47, 49%, 91%, 0.16);
    margin: 0rpx auto 20rpx;
    position: relative;
    top: -10rpx;
    width: 700rpx;
}

.action-list .item {
    border-bottom: 1rpx solid #f3f3f3;
    padding: 30rpx 20rpx 30rpx 30rpx;
}

.action-list .item,
.action-list .item .left-icon {
    align-items: center;
    display: flex;
}

.action-list .item .left-icon {
    flex: 0 0 60rpx;
    justify-content: center;
    width: 60rpx;
}

.action-list .item .left-icon image {
    height: 34rpx;
    width: 34rpx;
}

.action-list .item .text {
    color: #333;
    flex-grow: 1;
    font-size: 28rpx;
    font-weight: 700;
}

.action-list .item .total {
    background: #f2f2f2;
    border-radius: 20rpx;
    color: #333;
    font-size: 28rpx;
    font-weight: 700;
    height: 40rpx;
    margin-right: 10rpx;
    padding: 0rpx 30rpx;
}

.action-list .item .icon-arrow-right {
    align-items: center;
    color: #aaa;
    display: flex;
    display: block;
    font-size: 42rpx;
    line-height: 42rpx;
    padding: 0rpx;
}

.float-btn {
    bottom: 160rpx;
    height: 160rpx;
    position: fixed;
    right: 10rpx;
    width: 160rpx;
}

@-webkit-keyframes yaoyiyao {
    0% {
        transform: scale(1) rotate(-4deg);
    }

    25% {
        transform: rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(4deg);
    }

    75% {
        transform: rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(-4deg);
    }
}

@keyframes yaoyiyao {
    0% {
        transform: scale(1) rotate(-4deg);
    }

    25% {
        transform: rotate(0deg);
    }

    50% {
        transform: scale(1.1) rotate(4deg);
    }

    75% {
        transform: rotate(0deg);
    }

    100% {
        transform: scale(1) rotate(-4deg);
    }
}
